<template>
  <div>
    <div class="xian"></div>
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline timeSelect">
        <el-form-item label="客户名称" class="tabItem">
          <el-input class="inputMax2"></el-input>
        </el-form-item>
        <el-form-item class="tabBtn">
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </el-form-item>
        <el-form-item class="tabBtn">
          <el-button type="primary">导出结果</el-button>
        </el-form-item>
      </el-form>
        <el-table :data="tableData" class="orderTable orderTable4">
          <el-table-column prop="CustomerName" label="客户名称" align="center" style="width:25%">
          </el-table-column>
          <el-table-column prop="loginTime" label="最近登录时间" align="center">
          </el-table-column>
          <el-table-column prop="rechargeTime" label="最近充值时间" align="center">
          </el-table-column>
          <el-table-column prop="consumptionTime" label="最近消费时间" align="center">
          </el-table-column>
          <el-table-column prop="AccountBalance" label="账户余额 （含虚拟币）" align="center">
          </el-table-column>
          <el-table-column prop="RepaidAmount" label="已充值金额 （元）" align="center">
          </el-table-column>
          <el-table-column prop="ConsumptionAmount" label="已消费广告金额 （元）" align="center">
          </el-table-column>
          <el-table-column prop="CashDivision" label="现金分成小计 （元）" align="center">
          </el-table-column>
          <el-table-column prop="orderNum" label="广告订单数" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center">
          </el-table-column>
        </el-table>
      <div class="pageBox">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage3:1,
      tableData: [
        {
          CustomerName: "稻城亚丁拉布拉达温泉",
          loginTime: "2018-10-29",
          rechargeTime: "2018-10-29",
          consumptionTime: "2018-10-29",
          AccountBalance: "99.90",
          RepaidAmount: "3455.00",
          ConsumptionAmount: "3455.00",
          CashDivision: "566.00",
          orderNum: "56",
          remark: "高级客户"
        },
        {
          CustomerName: "稻城亚丁拉布拉达温泉",
          loginTime: "2018-10-29",
          rechargeTime: "2018-10-29",
          consumptionTime: "2018-10-29",
          AccountBalance: "99.90",
          RepaidAmount: "3455.00",
          ConsumptionAmount: "3455.00",
          CashDivision: "566.00",
          orderNum: "56",
          remark: "高级客户"
        },
        {
          CustomerName: "稻城亚丁拉布拉达温泉",
          loginTime: "2018-10-29",
          rechargeTime: "2018-10-29",
          consumptionTime: "2018-10-29",
          AccountBalance: "99.90",
          RepaidAmount: "3455.00",
          ConsumptionAmount: "3455.00",
          CashDivision: "566.00",
          orderNum: "56",
          remark: "高级客户"
        },
        {
          CustomerName: "稻城亚丁拉布拉达温泉",
          loginTime: "2018-10-29",
          rechargeTime: "2018-10-29",
          consumptionTime: "2018-10-29",
          AccountBalance: "99.90",
          RepaidAmount: "3455.00",
          ConsumptionAmount: "3455.00",
          CashDivision: "566.00",
          orderNum: "56",
          remark: "高级客户"
        },
        {
          CustomerName: "稻城亚丁拉布拉达温泉",
          loginTime: "2018-10-29",
          rechargeTime: "2018-10-29",
          consumptionTime: "2018-10-29",
          AccountBalance: "99.90",
          RepaidAmount: "3455.00",
          ConsumptionAmount: "3455.00",
          CashDivision: "566.00",
          orderNum: "56",
          remark: "高级客户"
        },
        {
          CustomerName: "稻城亚丁拉布拉达温泉",
          loginTime: "2018-10-29",
          rechargeTime: "2018-10-29",
          consumptionTime: "2018-10-29",
          AccountBalance: "99.90",
          RepaidAmount: "3455.00",
          ConsumptionAmount: "3455.00",
          CashDivision: "566.00",
          orderNum: "56",
          remark: "高级客户"
        },
        {
          CustomerName: "稻城亚丁拉布拉达温泉",
          loginTime: "2018-10-29",
          rechargeTime: "2018-10-29",
          consumptionTime: "2018-10-29",
          AccountBalance: "99.90",
          RepaidAmount: "3455.00",
          ConsumptionAmount: "3455.00",
          CashDivision: "566.00",
          orderNum: "56",
          remark: "高级客户"
        },
        {
          CustomerName: "稻城亚丁拉布拉达温泉",
          loginTime: "2018-10-29",
          rechargeTime: "2018-10-29",
          consumptionTime: "2018-10-29",
          AccountBalance: "99.90",
          RepaidAmount: "3455.00",
          ConsumptionAmount: "3455.00",
          CashDivision: "566.00",
          orderNum: "56",
          remark: "高级客户"
        },
      ]
    }
  },
  methods: {
    mydel() {
      this.$confirm("确认删除此订单？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          })
        })
    },
    handleSizeChange(){

    },
    handleCurrentChange(){

    }
  }
}
</script>

<style>

.orderTable4 .el-table__body tr > td:first-child{ font-size: 16px;}
.orderTable4.el-table--enable-row-hover .el-table__body tr:hover > td:first-child{ color: #38c474;}
.el-message-box{ width: 90%; max-width: 356px;}
.el-message-box__headerbtn{ opacity: 0;}
.el-message-box__message{ font-size: 16px; color: #000000; line-height: 200%;}
.el-message-box__btns{ padding: 20px 15px 0;}
.el-message-box .el-button--default{ color: #38c474 !important; border-color: #38c474 !important; background: none !important; min-width: 100px;}
.el-message-box .el-button--primary{ color: #ffffff !important; background: #38c474 !important; border-color: #38c474 !important;}
</style>

